HTML Drag and Drop API

HTML Drag and Drop API ஒரு உறுப்பை இழுத்து விட அனுமதிக்கிறது.

நடைமுறை:

கீழே உள்ள jassif team படத்தை இரண்டாவது செவ்வகத்திற்குள் இழுத்து விடவும்.

இழுத்து விடுதல்

இழுத்து விடுதல் மிகவும் பொதுவான அம்சமாகும். இது நீங்கள் ஒரு பொருளை "பிடித்து" வேறு இடத்திற்கு இழுப்பது ஆகும்.

உலாவி ஆதரவு

அட்டவணையில் உள்ள எண்கள் Drag and Drop ஐ முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

API	Chrome	Edge	Firefox	Safari	Opera
Drag and Drop	4.0	9.0	3.5	6.0	12.0

HTML Drag and Drop API எடுத்துக்காட்டு

கீழே உள்ள எடுத்துக்காட்டு ஒரு எளிய இழுத்து விடும் எடுத்துக்காட்டு:

எடுத்துக்காட்டு

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>

இது சிக்கலானதாகத் தோன்றலாம், ஆனால் ஒரு இழுத்து விடும் நிகழ்வின் வெவ்வேறு பகுதிகளைப் பார்ப்போம்.

ஒரு உறுப்பை இழுக்கக்கூடியதாக ஆக்குதல்

முதலில்: ஒரு உறுப்பை இழுக்கக்கூடியதாக ஆக்க, draggable பண்புக்கூறை true ஆக அமைக்கவும்:

எடுத்துக்காட்டு

<img id="img1" draggable="true">

அல்லது:

எடுத்துக்காட்டு

<p id="p1" draggable="true">இழுக்கக்கூடிய உரை</p>

எதை இழுக்க வேண்டும் - ondragstart மற்றும் setData()

பின்னர், உறுப்பு இழுக்கப்படும் போது என்ன நடக்க வேண்டும் என்பதைக் குறிப்பிடவும்.

மேலே உள்ள எடுத்துக்காட்டில், <img> உறுப்பின் ondragstart பண்புக்கூறு ஒரு செயல்பாட்டை (dragstartHandler(ev)) அழைக்கிறது, இது எந்த தரவு இழுக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது.

dataTransfer.setData() முறை இழுக்கப்படும் தரவின் தரவு வகை மற்றும் மதிப்பை அமைக்கிறது:

எடுத்துக்காட்டு

function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

இந்த வழக்கில், தரவு வகை "text" மற்றும் மதிப்பு இழுக்கக்கூடிய உறுப்பின் id ("img1") ஆகும்.

எங்கே விட வேண்டும் - ondragover

<div> உறுப்பின் ondragover பண்புக்கூறு ஒரு செயல்பாட்டை (dragoverHandler(ev)) அழைக்கிறது, இது இழுக்கப்படும் தரவு எங்கே விடப்படலாம் என்பதைக் குறிப்பிடுகிறது.

இயல்பாக, தரவு/உறுப்புகள் பிற உறுப்புகளில் விடப்பட முடியாது. ஒரு விடுதலை அனுமதிக்க, நாம் உறுப்பின் இயல்புநிலை கையாளுதலுக்குத் தடை விதிக்க வேண்டும்.

இது ondragover நிகழ்வுக்கான preventDefault() முறையை அழைப்பதன் மூலம் செய்யப்படுகிறது:

எடுத்துக்காட்டு

function dragoverHandler(ev) {
  ev.preventDefault();
}

விடுதலைச் செய் - ondrop

இழுக்கப்படும் தரவு விடப்படும் போது, ஒரு drop நிகழ்வு ஏற்படுகிறது.

மேலே உள்ள எடுத்துக்காட்டில், <div> உறுப்பின் ondrop பண்புக்கூறு dropHandler(event) செயல்பாட்டை அழைக்கிறது:

எடுத்துக்காட்டு

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

குறியீடு விளக்கம்:

தரவின் உலாவி இயல்புநிலை கையாளுதலைத் தடுக்க preventDefault() ஐ அழைக்கவும் (இயல்புநிலை விடப்பட்டால் இணைப்பாக திறக்கப்படும்)
dataTransfer.getData() முறையுடன் இழுக்கப்படும் தரவைப் பெறவும். இந்த முறை setData() முறையில் அதே வகைக்கு அமைக்கப்பட்ட எந்த தரவையும் வழங்கும்
இழுக்கப்படும் தரவு இழுக்கப்பட்ட உறுப்பின் id ("img1") ஆகும்
இழுக்கப்பட்ட உறுப்பை விடும் உறுப்பில் இணைக்கவும்

இழுத்து விடும் நிகழ்வுகள்

dragstart

உறுப்பு இழுக்கத் தொடங்கும் போது

drag

உறுப்பு இழுக்கப்படும் போது

dragenter

இழுக்கப்பட்ட உறுப்பு வலையில் நுழையும் போது

dragover

இழுக்கப்பட்ட உறுப்பு வலையின் மேல் இருக்கும் போது

dragleave

இழுக்கப்பட்ட உறுப்பு வலையை விட்டு வெளியேறும் போது

drop

இழுக்கப்பட்ட உறுப்பு விடப்படும் போது

dragend

இழுத்தல் செயல்பாடு முடிவடையும் போது

ஊடாடும் நடைமுறை

வழிமுறைகள்:

கீழே உள்ள "இழுத்து விடு உறுப்பு" ஐ "இலக்கு பகுதி" க்குள் இழுத்து விடவும்.

இழுத்து விடு உறுப்பு

இலக்கு பகுதி

நடைமுறைக் குறிப்பு:

இழுக்கக்கூடிய உறுப்பை மூல பகுதிக்குத் திரும்ப கொண்டு செல்லலாம். முழு செயல்முறையும் கண்காணிக்கப்படுகிறது.

மேலும் எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு: <h1> உறுப்பை <div> உறுப்பிற்கு இழுத்து விடுதல்

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</h1>

எடுத்துக்காட்டு: <a> உறுப்பை <div> உறுப்பிற்கு இழுத்து விடுதல்

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://jassifteam.com" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</a>

பயிற்சி

❓ ஒரு உறுப்பை இழுக்கக்கூடியதாக ஆக்க பின்வரும் எந்த பண்புக்கூறு பயன்படுத்தப்படுகிறது?

movable="true"

✗ தவறு! "movable" என்பது செல்லுபடியாகும் HTML பண்புக்கூறு அல்ல

draggable="true"

✓ சரி! draggable="true" ஒரு உறுப்பை இழுக்கக்கூடியதாக ஆக்க பயன்படுகிறது

drag="enabled"

✗ தவறு! "drag" என்பது செல்லுபடியாகும் HTML பண்புக்கூறு அல்ல